<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="../css/moveme.css" />
<!--<link rel="stylesheet" type="text/css" href="../fonts/Abel.css" />
	<link rel="stylesheet" type="text/css" href="../fonts/Lato.css" /> -->

	<script src="../js/jquery.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	
	
    <script>
        $a = jQuery.noConflict();
        
        
        function handleDrop(event, ui) {
            var draggable = ui.draggable,
            helper = ui.helper,
            position = ui.position,
            offset = ui.offset;
            alert(po);
    	 }

        $(".testImg").draggable({

            // Find original position of dragged image.
            start: function(event, ui) {

            	// Show start dragged position of image.
            	var Startpos = $(this).position();
            	$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
            },

            // Find position where image is dropped.
            stop: function(event, ui) {

            	// Show dropped position.
            	var Stoppos = $(this).position();
            	$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
            }
        });
    </script>
	
	
	<title><ui:insert name="title">Ecodif</ui:insert></title>
</h:head>
<h:body>
<!-- Begin Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse"
		data-target=".navbar-collapse">
		<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
		<span class="icon-bar"></span> <span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="index.html">EcoDIF</a>
</div>
<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
		<li><a href="index.html">Página Principal</a></li>
		<li><a href="#">Dispositivos</a></li>
		<li><a href="#">Feeds</a></li>
		<li><a href="#">Aplicações</a></li>
		<li><a href="#">Documentação</a></li>
		<li class="active"><a href="#">Editor</a></li>
	</ul>
</div>
</nav>
<!-- End Navigation -->

<!-- Begin Main Editor -->
<div class="container-fluid">
	<div class="row" style="margin-top: 50px;">
		<div style="width: 20%; height: 650px; float: left;">
	
	<!-- Begin Panel Menu -->
		<h:form id="FeedsForm">
				<p:dataTable id="feedsList" var="feed" value="#{feedMB.feeds}" style="width:100%">
					<p:column headerText="Feeds" styleClass="defaultFont">
						<span class="glyphicon glyphicon-globe" style="height: 20px;"></span>  
						<h:outputText id="dragName" value=" #{feed.name}">
						</h:outputText>
						<p:draggable for="dragName" revert="true" helper="clone" grid="20,30" opacity="0.5"></p:draggable>
					</p:column>
				</p:dataTable>		
		</h:form>
		</div>
		<div style="width: 80%; height: 650px; float: left">
			<div style="height: 400px;">
				<p:dataGrid id="zone" style="background:#ccc;height:400px;width:100%;" var="selectedFeeds" value="#{feedMB.selectedFeeds}">			
							<h:outputText value="Teste" />
				</p:dataGrid>
				<p:droppable for="zone" onDrop="handleDrop">
					<p:ajax listener="#{feedMB.onDrop}" update="zone"></p:ajax>
				</p:droppable>
			</div>
			<div style="background: yellow; height: 250px;"></div>
		</div>
	</div>
</div>
<!-- End Main Editor -->

<!-- Begin Footer -->
<div class="ftr">
	<div class="container">
		<div class="row">
			<footer>
			<div class="center">
				<p>Copyright &copy; 2013 GT-EcoDIF | Todos os direitos
					reservados.</p>
			</div>
			</footer>
		</div>
	</div>
</div>
<!-- End Footer -->
</h:body>
</html>